<template>
  <div class="footer-details">
    <nav-header></nav-header>
    <div class="layout-center">
      <div class="grid-c2">
        <div class="col-main">
          <div class="item-left">
            <ul>
              <li class="help-center">帮助中心</li>
            </ul>
            <w-side-menu :menus='helpMenus'></w-side-menu>
          </div>
          <div class="item-right">
            <div class="cols">
              <w-helpCenter :content="helpMenus"></w-helpCenter>
            </div>
          </div>
        </div>
      </div>
      <div style="clear:both;"></div>
    </div>
  </div>
</template>

<script>
import header from './my/components/header.vue'
import help from './helpCenter/help'
import { mapGetters } from 'vuex'

export default {
  components: {
    'nav-header': header,
    'w-helpCenter': help
  },
  data() {
    return {
      menuList: []
    }
  },
  computed: {
    ...mapGetters(['helpMenus'])
  },
  updated() {
    if (!this.helpMenus || this.helpMenus.length == 0) {
      return []
    }

    this.helpMenus.forEach((v) => {
      v.childs.forEach((v1) => {
        if (v1.title == this.$route.params.title) {
          this.$set(v, 'isShow', true)
          this.$set(v1, 'isShow', true)
        }
      })
    })
  }
}
</script>

<style style lang="scss" scoped>
  @import '../scss/_var.scss';
  .help-center {
    text-align: center;
    background-color: #eeeeee;
    padding: 12px 0;
    font-size: 16px;
    font-weight: bolder;
  }
  .layout-center {
    margin: 0 auto;
    width: 1230px;
    .grid-c2 {
      width: 100%;
      height: 100%;
      position: relative;
      left: 2px;
      clear: both;

      .col-main {
        float: left;
        width: 100%;
        padding-top: 25px;
        // padding-bottom: 40px;
        -webkit-transition: all ease-in-out .15s;
        transition: all ease-in-out .15s;
      }
    }

    .item-left {
      overflow: hidden;
      float: left;
      margin-right: 10px;
    }

    .item-right {
      position: relative;
      float: left;
      width: 1080px;
      .cols {
        width: 100%;
      }
    }
  }
</style>
